Editable JavaScript TreeGrid

TreeGrid editing tutorial

These tutorials show using more specific functions in TreeGrid.

They show using advanced editing functions, cell spanning, user rows, advanced header, paging and dragging.

Every example can be used on single page with this structure:

<html>
    <head>
        <script src="../Grid/GridE.js"> </script>
    </head>
    <body>
        <div style="width:100%;height:100%;"> 
           <treegrid Data_Url="EditingX ... .xml"> </treegrid>
        </div>
    </body>
</html>

If you modify in input data some attributes saved to cookies, increase <Cfg> attribute Version to suppress old configuration.

Basic types

Show example

By default are all cells editable. You can suppress editing for whole grid by <Cfg Editing='0'>. Or you can suppress editing for column, row or cell by setting appropriate CanEdit attribute to 0.
Basic types for editing are Text, Int, Float are edited in <input> textbox, Date is edited in <input> textbox with possibility to show calendar, Enum is edited in <select> and Bool is edited by checkbox.
For number formats (Int, Float and Date) you can set advanced options in EditFormat attribute. See TreeGrid cell formats.
The items (options) of Enum type are set by Enum attribute, the indexes higher then items count are displayed as integer and formatted by IntFormat attribute.
See in example, there are various edit formats in cells.
For number formats are also permitted only some keys when editing - digits and separators.
By default grid does not handle empty values for number and date types, you can change this behavior by <Cfg> attributes EmptyNumber and EmptyDate.
Editing you can control dynamically by JavaScript API events OnStartEdit and OnEndEdit. Also cell types and permissions you can control in events OnCanEdit, OnGetType, OnGetFormat, OnGetEnum.

Show data source

 
<Grid>
  <Cfg id='Editing1' Sorting='0'
     EmptyNumber='- empty -' 
     EmptyDate='- none -'/>
  <Cols>
    <C Name='A' Type='Text'/>
    <C Name='B' Type='Int'/>
    <C Name='C' Type='Float'/>
    <C Name='D' Type='Date' Width='90'/>
    <C Name='E' Type='Date' Button='None' 
       Format='HH:mm:ss'/>
    <C Name='F' Type='Enum' 
       Enum='|one|two|three'
       IntFormat='(##)'/>
    <C Name='G' Type='Bool'/>
  </Cols>
  <Header A='Text' B='Int' C='Float' 
     D='Date' E='Date' F='Enum' G='Bool'/>
  <Body>
    <B>
      <I/> 
      <I A='Text 1' B='0' C='3.14' 
         D='1/1/2000' E='10:12:30' F='0' 
         G='0'/>
      <I A='Text 2' 
         B='20' BEditFormat='000' 
         C='7' CEditFormat='000' 
         D='12/31/2005' DEditFormat='MM/dd' 
         E='4:15' EEditFormat='H:mm' 
         F='1' G='1' GCanEdit='0'/>
      <I A='Text 3' ACanEdit='0' B='-3' 
         C='-13.256' CEditFormat='0.0000' 
         D='7/12/1900' DButton='None'
         DEditFormat='M/d/yyyy'  
         E='23:59:59' EEditFormat='HH:mm' 
         F='2' FCanEdit='0' G='1'/>
      <I A='Text 4' B='1234' 
         C='0.032' CEditFormat='00.000' 
         D='5/20/2010' DEditFormat='M/d/yy' 
         E='00:00:00' EEditFormat='H:m:s' 
         F='8' G='0'/>
    </B>
  </Body>
</Grid>

Multiline editing

Show example

If you want to use multiline editing, you need to permit variable row height by <Cfg VarHeight='1'>. The VarHeight can slow down grid rendering for large grids and is not recommended to use with paging.
You can set maximal height for every row by MaxHeight attribute.
Multiline editing is set by cell type Lines. For editing is used <textarea>.
If you want to predefine values containing new line character, you can write it to XML by its entity 

If you want to use Enter key for inserting new lines to textarea, set <Cfg AcceptEnters='1'>. To finish editing an user must use Alt+Enter or Ctrl+Enter key now.
When some value cannot be edited and row's height is restricted is good to set CanEdit='2' to suppress editing, but let user to click to cell and see all content.

Show data source

 
<Grid>
  <Cfg id='Editing2' AcceptEnters='1' 
     VarHeight='1'/>
  <Cols>
    <C Name='A' Type='Text' Width='40'/>
    <C Name='B' Type='Lines' Width='130'/>
    <C Name='C' Type='Lines' Width='130'/>
  </Cols>
  <Body>
    <B>
      <I A='Text 1' B='Short text' 
         C='Short text'/>
      <I A='Text 2' B='Short text' 
         C='Long text, one two three four five six seven eight nine ten'/>
      <I A='Text 3' 
         B='Long text, one two three four five six seven eight nine ten' 
         C='Long text, one two three four five'/>
      <I A='Text 4' 
         B='Long text&#x0A;with enters&#x0A;Bla bla plus' 
         C='OneLongLineOfTextOneTwoThreeFourFive'/>
      <I MaxHeight='45' A='Text 5' 
         B='Very long text, one two three four five six seven eight nine ten eleven twelve thirteen' 
         CCanEdit='2' 
         C='Very long text, one two three four five six seven eight nine ten eleven twelve thirteen'/>
    </B>
  </Body>
</Grid>

Editing mask

Show example

Base predefined masks are applied by various cell types, but especially for types Text and Lines you can define your own mask by any RegExp string.
You can set attribute EditMask. This mask is applied when editing, it immediatelly restricts user from writing text that is colliding with the mask.
You can also set attribute ResultMask. This mask is applied after user accepts changes and saves changed value and if the result value collides with the mask, does not leave edit mode.
In EditMask is usually permitted blank value and is generally less restrictive to simplify editing then ResultMask.
See also attributes MaskColor and ResultText.
The cell value in input xml data must not collide with its mask or an user could not edit the value.
It is better to test mask in external script before is included in grid. The mask often starts with ^ and ends with $ to apply it on whole text.

Show data source

<Grid>
  <Cfg id='Editing3' AcceptEnters='1' 
     VarHeight='1'/>
  <Cols>
    <C Name='A' Type='Text' Width='200'/>
    <C Name='B' Type='Lines' Width='110' 
       CanEdit='0'/>
  </Cols>
  <Header A='Text' B='Mask'/>
  <Body>
    <B>
      <I A='abcdef' AMaskColor='blue' 
         AEditMask='^[a-z]*$' 
         B='only small letters'/>
      <I A='123456' AEditMask='^[0-9]*$' 
         B='only digits'/>
      <I A='support@coqsoft.com' 
         AEditMask='^[\w\.-]*@[\w\.-]*\.[a-zA-Z\.]*$' 
         AResultMask='^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$' 
         AResultText='Given email address is incorrect !' 
         B='email'/>
      <I A='sales@coqsoft.com' 
         AResultMask='^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$' 
         AResultText='Given email address is incorrect !' 
         B='email post validation'/>
      <I A='http://www.coqsoft.com/treegrid/' 
         AEditMask='^http\:\/\/' 
         AResultMask='^http\:\/\/\w{1,}\.[\w\.]{1,}\/' 
         B='WWW URL'/>
      <I AType='Lines' 
         A='Name: TreeGrid support&#x0A;Email: support@coqsoft.com' 
         AEditMask='^Name\: [a-zA-z\.\- ]*\r?\nEmail\: [\w.-@]*$' 
         AResultMask='^Name\:\s[a-zA-z][a-zA-z\.\- ]*\r?\nEmail\: [a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$' 
         B='Name and email&#x0A;Alt+Enter to accept'/>
    </B>
  </Body>
</Grid>

Advanced types

Show example

There other cell types with special editing:

Link is link with url and optional text. You can edit both or url only. This you can specify by EditFormat attribute.
Img is image with source, optional extents and position and optional link. You can edit only specified parts, by EditFormat attribute.
Look also at Formatting images and links.
Pass is password input, there is no special settings for this type. But remember, password in data sent to server is not coded.
Radio is enumeration integer type displayed as radio buttons or check boxes. You can control all settings by Format attribute. There are two modes of Radio type controlled by 5. bit (&16) of the first item in Format. In the first mode can be only one radio button checked, the value specifies the position of radio button. In the second mode can be more radio buttons checked, the value specifies bit mask of checked radio buttons.
List is html type to show different values with the same formatting, it is intended just to shrink input XML and is expected to be read only.

Show data source

  <Cfg id='Editing4' AcceptEnters='1' 
    VarHeight='1' Version='2'/>
  <Cols>
    <C Name='X' CanEdit='0'/>
    <C Name='A'/>
    <C Name='B' CanEdit='0'/>
  </Cols>
  <Header X='Name' 
    A='Editable' B='Noneditable'/>
  <Def>
    <D Name='Link' X='Link' 
      AType='Link' BType='Link'/>
    <D Name='Img' X='Img' 
      AType='Img' AFormat='|||||||1' 
      BType='Img' BFormat='|||||||1'/>
    <D Name='List' X='List' 
      AFormat='|0||||&lt;B style="color:red">|&lt;/B>|||||&lt;B style="color:green">|&lt;/B>|||||&lt;B style="color:blue">|&lt;/B>'
      BFormat='|0||||&lt;B style="color:red">|&lt;/B>|||||&lt;B style="color:green">|&lt;/B>|||||&lt;B style="color:blue">|&lt;/B>'
      AType='List' BType='List'/>
  </Def>
  <Body>
    <B>
      <I AType='Link' BType='Link' 
         A='|http://www.treegrid.com' 
         B='|http://www.treegrid.com'/>
      <I AType='Link' BType='Link' 
         A='|http://www.treegrid.com|TreeGrid' 
         B='|http://www.treegrid.com|TreeGrid'/>
      <I AType='Link' BType='Link'
         AEditFormat='|2|1|1' 
         A='|http://www.treegrid.com|TreeGrid' 
         B='|http://www.treegrid.com|TreeGrid'/>
      <I AType='Img' BType='Img'
         A='|../Grid/Toolbar.gif' 
         B='|../Grid/Toolbar.gif'/>
      <I AType='Img' BType='Img'
         A='|../Grid/Toolbar.gif|||||http://www.treegrid.com' 
         B='|../Grid/Toolbar.gif|||||http://www.treegrid.com'/>
      <I AType='Img' BType='Img' 
         AEditFormat='|2|1|0|1' 
         A='|../Grid/Toolbar.gif|||||http://www.treegrid.com' 
         B='|../Grid/Toolbar.gif|||||http://www.treegrid.com'/>
      <I AType='Img' BType='Img'
         AEditFormat='|2|1|1|1' 
         A='|../Grid/Toolbar.gif|20|17|28|0|http://www.treegrid.com' 
         B='|../Grid/Toolbar.gif|20|17|28|0|http://www.treegrid.com'/>
      <I X='Pass' AType='Pass' 
        BType='Pass' A='abc' B='abc'/>
      <I X='Radio' AType='Radio' A='6' 
        AFormat='|1||||||0|1|2|3|4|5|6|7|8|9|10' 
        BType='Radio' B='6' 
        BFormat='|1||||||0|1|2|3|4|5|6|7|8|9|10'/>
      <I X='Radio' AType='Radio' A='6' 
        AFormat='|48||||||1|2|4|8|16' 
        BType='Radio' B='6' 
        BFormat='|48||||||1|2|4|8'/>
      <I Def='List' A='|R|G|B' B='|R|G|B'/>
      <I Def='List' A='|One |Two |Three ' 
        B='|One |Two |Three '/>
    </B>
  </Body>
</Grid>

Right buttons

Show example

On the right of any cell you can show button and specify action to do after click. It can be set in column or cell attribute Button.
By default is for cell type Date specified button "Date", for other types "None".
There are four possible Button options:
- "None" to suppress predefined action.
- "Date" to show date picker.
- "Button" or "Img" to run custom function in API event OnButtonClick. The button width you can specify by WidthPad and text or image source by ButtonText.
- "Defaults" to show menu with list of values to choose one for the cell.
  What items to show you have to specify in array Defaults.
  In Defaults you can provide list of items to choose, it is similar to combo box with possibility to input new values. Or you can include all or some values from other rows in this column. Or you can still call "Date" or "Button" dialogs.

Show data source

 
<Grid>
  <Cfg id='Editing5' Sorting='0' 
     MainCol='A'/>
  <Cols>
    <C Name='A' Type='Text' Width='110'
       Button='Defaults' 
       Defaults='|*RowsSibling'/>
    <C Name='B' Type='Date' Width='110'/>
    <C Name='C' Type='Int' Width='60'/>
  </Cols>
  <Header A='Text' B='Date' C='Int'/>
  <Head>
    <I Kind='Filter' 
       ADefaults='|*RowsAll' 
       BButton='Defaults' 
       BDefaults='|*Date|*RowsAll'/>
  </Head>
  <Body>
    <B>
      <I A='One' B='1/1/2000' 
         C='4' CButton='Defaults' 
         CDefaults='|*RowsAllMax3' 
         CanFilter='0'>
        <I A='One A' B='12:30' 
           BButton='None' BFormat='HH:mm' 
           C='1'/>
        <I A='One B' B='6/7/2005' C='1'/>
      </I>
      <I A='Two' AButton='None' 
         B='12/31/2006' 
         C='1' CButton='Defaults' 
         CDefaults='|*RowsAll'/>
      <I A='Three' 
         ADefaults='|*RowsSiblingMax5' 
         B='12/31/2006' 
         C='2' CButton='Defaults' 
         CDefaults='|*RowsAllMax3|10|20|30'/>
      <I A='Four' 
         ADefaults='|1|2|3|4|5|6|7|8|9' 
         B='12/31/2006' BButton='Button' 
         BButtonText='Click' 
         BWidthPad='40' C='1'/>
      <I A='Five' 
         AButton='Button' 
         AButtonText='Click' 
         AWidthPad='30' B='12/31/2006' 
         C='3'/>
      <I A='Six' 
         ADefaults='|*Button|*RowsSiblingMax5' 
         B='12/31/2006' C='1'/>
      <I A='Seven' 
         ADefaults='|*Button|1|2|3' 
         B='12:30' BFormat='hh:mm tt' 
         BButton='None' C='2'/>
      <I A='Eight' AButton='None' 
         B='12/31/2006' BButton='Defaults' 
         BDefaults='|*RowsSibling|*Date' 
         C='4'/>
      <I A='Nine' AButton='None' 
         B='12/31/2006' BButton='None'
         C='5'/>
    </B>
  </Body>
</Grid>

Previous <<< Calculations tutorial

Next >>> Expert tutorial